<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>编程课程 - 【少儿编程教学平台】</title>
    <link rel="icon" href="/img/logo.png">
    <link rel="stylesheet" type="text/css" href="/css/sVideo.css">
    <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>

</head>
<body>
<div class="headerpage"></div>
<div class="edit-head">
    <h1>编程课程</h1>
</div>
<div class="content">
    <div class="center">
        <ul class="box-ul">
            <li class="box-big" onclick="window.location.href='sOpen'">
                <div class="big-view"></div>
                <div class="big-mask"></div>
                <div class="big-text big-over">一份家长必读的少儿编程教育手册</div>
            </li>
            <li class="box-big" onclick="window.location.href='sOpen'" style="left:32px;">
                <div class="big-view"></div>
                <div class="big-mask"></div>
                <div class="big-text big-over">为什么要孩子学习少儿编程？该什么时候学？</div>
            </li>
            <li class="box box-top" onclick="window.location.href='sOpen'" style="margin-left: 36px;">
                <div class="box-view"></div>
                <div class="mask"></div>
                <div class="box-text">一份家长必读的少儿编程教育手册</div>
            </li>
            <li class="box box-top" onclick="window.location.href='sOpen'">
                <div class="box-view"></div>
                <div class="mask"></div>
                <div class="box-text">为什么要孩子学习少儿编程？该什么时候学？</div>
            </li>
            <li class="box box-top" onclick="window.location.href='sOpen'">
                <div class="box-view"></div>
                <div class="mask"></div>
                <div class="box-text">霍金编剧的科普大片[与霍金一起了解宇宙]，带孩子走进茫茫宇宙！</div>
            </li>
            <li class="box box-top" onclick="window.location.href='sOpen'">
                <div class="box-view"></div>
                <div class="mask"></div>
                <div class="box-text">2017编程一小时|全球最大型的少儿编程公益活动正式启动！</div>
            </li>
            <li class="box" onclick="window.location.href='sOpen'" style="margin-left: 36px;">
                <div class="box-view"></div>
                <div class="mask"></div>
                <div class="box-text">我家孩子该如何开始少儿编程的学习</div>
            </li>
            <li class="box" onclick="window.location.href='sOpen'">
                <div class="box-view"></div>
                <div class="mask"></div>
                <div class="box-text"></div>
            </li>
            <li class="box" onclick="window.location.href='sOpen'">
                <div class="box-view"></div>
                <div class="mask"></div>
                <div class="box-text"></div>
            </li>
            <li class="box" onclick="window.location.href='sOpen'">
                <div class="box-view"></div>
                <div class="mask"></div>
                <div class="box-text"></div>
            </li>
            <li class="box" onclick="window.location.href='sOpen'" style="margin-left: 36px;">
                <div class="box-view"></div>
                <div class="mask"></div>
                <div class="box-text"></div>
            </li>
            <li class="box" onclick="window.location.href='sOpen'">
                <div class="box-view"></div>
                <div class="mask"></div>
                <div class="box-text"></div>
            </li>
            <li class="box" onclick="window.location.href='sOpen'">
                <div class="box-view"></div>
                <div class="mask"></div>
                <div class="box-text"></div>
            </li>
            <li class="box" onclick="window.location.href='sOpen'">
                <div class="box-view"></div>
                <div class="mask"></div>
                <div class="box-text"></div>
            </li>
            <li class="box" onclick="window.location.href='sOpen'" style="margin-left: 36px;">
                <div class="box-view"></div>
                <div class="mask"></div>
                <div class="box-text"></div>
            </li>
            <li class="box" onclick="window.location.href='sOpen'">
                <div class="box-view"></div>
                <div class="mask"></div>
                <div class="box-text"></div>
            </li>
            <li class="box" onclick="window.location.href='sOpen'">
                <div class="box-view"></div>
                <div class="mask"></div>
                <div class="box-text"></div>
            </li>
            <li class="box" onclick="window.location.href='sOpen'">
                <div class="box-view"></div>
                <div class="mask"></div>
                <div class="box-text"></div>
            </li>
        </ul>

    </div>
</div>

<div class="footerpage"></div>

</body>

<script type="text/javascript">

    $(function () {
        $(".headerpage").load("header.jsp");
        $(".footerpage").load("footer.jsp");
    });

    $(".big-text").mouseenter(function () {
        $(this).siblings(".big-mask").css("opacity", "0.5");
    })
    $(".big-text").mouseleave(function () {
        $(this).siblings(".big-mask").css("opacity", "0.7");
    })

    var boxs = document.getElementsByClassName("box");

    var mask = document.getElementsByClassName("mask");

    for (var i = 0; i < boxs.length; i++) {

        (function (e) {

            boxs[e].onmouseover = function () {
                mask[e].style.opacity = "0.5";
            }

            boxs[e].onmouseout = function () {
                mask[e].style.opacity = "0.7";
            }

        })(i)

    }
    })


</script>

</html>